import { Button, Card, Table, Image, ConfigProvider, Space, Modal } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import { useState } from "react";

import { Row } from "components/lib";
import { useDebounce } from "utils";
import { useDocumentTitle } from "utils/common";
import { SearchPanel } from "./search-panel";
import { useArticleSearchParams, useArticles, useArticleDel } from "./util";
import { CreateArticle } from "./create-article";
import { ArticleType } from "types/article";
import { useUrlQueryParam } from "utils/url";

const { Column } = Table;

export const Article = () => {
  useDocumentTitle("文章管理");

  const [createArticle, setCreateArticle] = useState(false);
  const [param, setParam] = useArticleSearchParams();
  const [, setId] = useUrlQueryParam(["id"]);
  const { data, isLoading } = useArticles(useDebounce(param, 200));
  const { mutateAsync } = useArticleDel();

  const pageIndex = param.page ? Number(param.page) : 1;
  const pageLimit = param.limit ? Number(param.limit) : 10;

  const addArticle = () => {
    setParam({ status: "", title: "" });
    setCreateArticle(true);
  };
  const close = () => {
    setId({ id: "" });
    setCreateArticle(false);
  };

  const changePage = (page: number, limit: number) => {
    setParam({
      ...param,
      page,
      limit,
    });
  };

  const startDel = (article: ArticleType) => {
    Modal.confirm({
      okText: "确定",
      cancelText: "取消",
      title: "确定删除吗?",
      onOk() {
        return mutateAsync({ id: article.id });
      },
    });
  };

  const startEdit = (article: ArticleType) => {
    setCreateArticle(true);
    setId({
      id: article.id,
    });
  };

  return (
    <Card>
      <Row between={true} marginBottom={2}>
        <SearchPanel param={param} setParam={setParam} />
        <Button onClick={() => addArticle()} type={"link"}>
          添加
        </Button>
      </Row>
      <ConfigProvider locale={zhCN}>
        <Table
          dataSource={data?.lists}
          loading={isLoading}
          rowKey={"id"}
          pagination={{
            defaultCurrent: pageIndex,
            pageSize: pageLimit,
            pageSizeOptions: ["5", "10"],
            total: data?.total,
            showSizeChanger: true,
            onChange: changePage,
            onShowSizeChange: changePage,
          }}
        >
          <Column title="标题" dataIndex={"title"} key="title" />
          <Column
            title="图片"
            key="img"
            render={(text, record) => (
              <>
                <Image width={100} src={text.thumb} />
              </>
            )}
          />
          <Column
            title="操作"
            key="action"
            render={(text, record) => (
              <Space size={"middle"}>
                <Button type={"link"} onClick={() => startEdit(text)}>
                  编辑
                </Button>
                <Button type={"link"} onClick={() => startDel(text)}>
                  删除
                </Button>
              </Space>
            )}
          />
        </Table>
      </ConfigProvider>
      <CreateArticle onClose={() => close()} visible={createArticle} />
    </Card>
  );
};
